<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main"/>
  <title>Message List</title>
  <link rel="alternate" type="application/rss+xml" title="MoTSangria Activity Log" href="<g:createLink class='message' action='feed'/>"/>
  <g:javascript library="scriptaculous"/>
  <g:javascript>
      function insertMessage(userId, userName, message) {
        var medium='MoTSangria Homepage'
        var url = "${createLink(controller: 'message', action: 'ajaxSave')}";
        url += "?user.id=" + userId + "&content=" + message + "&medium=" + medium;
        new Ajax.Request(url,{
          onSuccess: function(req) { uiCreate(userId, userName, message, medium, req); },
          onFailure: function(req) { displayError(req); }
        });
      }

      function uiCreate(userId, userName, message, medium, response) {
        var imageUrl = "<g:createLink controller='image' action='tiny'/>";
        var trashIconUrl = "${createLinkTo(dir: 'images', file: 'trash.gif')}";
        var userFilterUrl = "<g:createLink controller='message' action='user'/>";
        var messageContent = Builder.node('div', {id: 'message_' + response.responseText});
          var messageImage = Builder.node('div', {id: 'image_' + response.responseText, className: 'messageImage'});
          messageImage.appendChild(Builder.node('img', {border: 0, src: imageUrl + userId}));
        messageContent.appendChild(messageImage);
          var messageEntry = Builder.node('div', {className: 'messageEntry'});
            var messageHeader = Builder.node('div', {className: 'messageHeader'});
              messageHeader.appendChild(Builder.node('a', {href: userFilterUrl + userId}, userName));
              messageHeader.appendChild(Builder.node('span', {class: 'messageDate'}, 'gerade eben'));
            messageEntry.appendChild(messageHeader);
            messageEntry.appendChild(Builder.node('div', {className: 'messageText'}, message));
            messageEntry.appendChild (Builder.node('a', {href: '#', onClick: 'disposeMessage(" + response.responseText + ");'}, 'Löschen'));
        messageContent.appendChild(messageEntry);
        messageContent = $(messageContent);
        messageContent.hide();
         $('allPosts').insert({ top: messageContent });
         //$('image_' + response.responseText) = $('image_' + response.responseText);
         new Effect.BlindDown('message_' + id);
      }

      function disposeMessage(id) {
        var url = "${createLink(controller: 'message', action: 'ajaxDelete')}";
        url += "?id=" + id;

        if (confirm('Wirklich löschen?')) {
          new Ajax.Request(url,{
            onSuccess: function(req) { uiDispose(req, id); },
            onFailure: function(req) { displayError(req); }
          });
        }
      }

      function uiDispose(response, id) {
        Effect.BlindUp('message_' + id);
      }

      function displayError(response){
        var html = "response.status=" + response.status + "<br/>";
        html += "response.responseText=" + response.responseText + "<br/>";
        $("ajaxError").innerHTML = html;
        new Effect.Appear('ajaxError')
        new Effect.Fade('ajaxError', {delay: 6.0})
      }
  </g:javascript>
</head>
<body>
<div class="body">
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <div id="ajaxError" class="ajaxError"></div>
  <g:javascript>
    function hideMessages() {
      $('ajaxError').hide()
    }
    hideMessages();

    function updateCounter() {
      $("charLeft").value = "Noch " + (255 - $F("messageTextArea").length) + " Zeichen.";
    }
    updateCounter();
  </g:javascript>
  <h1>Activity Log <g:if test="${filter}">von ${filter}</g:if><g:else>des MoTSangria Teams</g:else></h1>
  <g:isLoggedIn>
    <div id="newPost">
      <input id="charLeft" name="charLeft" size="5" value="255" readonly="true"/>
      <g:form action="save">
        <input type="hidden" id="user.id" name="user.id" value="<g:loggedInUserInfo field='id'/>">
      <input type="hidden" id="medium" name="medium" value="MoTSangria Homepage">
      <textarea id="messageTextArea" name="content" onkeydown="updateCounter()" rows="3" cols="50"></textarea><br/>
      Private Nachricht:
      <g:checkBox name="isPrivate" value="${messageInstance?.isPrivate}" style="float:left;"></g:checkBox>
      <g:submitButton id="messageSubmitButton" name="post" value="Nachricht absenden" style="float:left;"/>
    </g:form>
  </div>
    <g:javascript>
      function updateCounter() {
        $("charLeft").value = "Noch " + (255 - $F("messageTextArea").length) + " Zeichen."
      }
      updateCounter();
    </g:javascript>
  </g:isLoggedIn>
  <div id="allPosts">
    <g:each status="i" var="messageInstance" in="${messageInstanceList}">
      <div class="messageContent" id="message_${messageInstance?.id}" name="message_${messageInstance?.id}">
        <div class="messageImage">
          <a href="<g:createLink controller="profile" action="show" id="${messageInstance?.user?.profile?.id}"/>"><img border="0" src="<g:createLink controller="image" action="tiny" id="${messageInstance?.user?.id}"/>" alt="${messageInstance?.user?.username}"/></a>
        </div>
        <div class="messageEntry">
          <div class="${messageInstance?.isPrivate ? 'messageHeaderPrivate' : 'messageHeader'}">
            <a href="<g:createLink controller="message" action="user" id="${messageInstance?.user?.id}"/>">${messageInstance?.user}</a> <span class="messageDate"><g:dateFromNow date="${messageInstance?.dateCreated}"/> via ${messageInstance?.medium}</span>
          </div>
          <div class="messageText">
            ${messageInstance?.content}
            <g:if test="${messageInstance?.link}"><span class="messageLink"><a href="${messageInstance?.link}" target="_blank">[More]</a></span></g:if>
          </div>
          <g:isLoggedIn>
            <a href="#" onClick="disposeMessage(${messageInstance?.id});"><img src="${createLinkTo(dir: 'images', file: 'trash.gif')}" alt='Delete Message' border='0'/></a>
          </g:isLoggedIn>
        </div>
      </div>
    </g:each>

  </div>
  <div class="paginateButtons">
    <g:paginate total="${Message.count()}"/>
    <g:isNotLoggedIn>
      <span><a href="<g:createLink class='message' action='feed'/>"><img src="${createLinkTo(dir: 'images', file: 'feed.gif')}" alt='Rss Feed' border='0'/></a></span>
    </g:isNotLoggedIn>
    <g:isLoggedIn>
      <span><a href="<g:createLink class='message' action='privateFeed'/>"><img src="${createLinkTo(dir: 'images', file: 'feed.gif')}" alt='Rss Feed' border='0'/></a></span>
    </g:isLoggedIn>

  </div>

</div>
</body>
</html>
